<template>
    <div>
      <el-form ref="" :model="formFileds">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item>
              <el-input></el-input>
            </el-form-item>
          </el-col>
  
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary">
                查询
              </el-button>
              <el-button type="primary">
                清空
              </el-button>
              <el-button type="primary">
                导出
              </el-button>
              <el-button type="primary" @click="deleteAll()">
                批量删除
              </el-button>
            </el-form-item>
          </el-col>
  
        </el-row>
      </el-form>
  
      <!--表格内容-->
      <el-table
        ref="profitForm"
        :data="tableData"
        style="width: 100%; margin-bottom: 5px"
        border
        stripe
        highlight-current-row
        :default-sort="{ prop: 'date', order: 'descending' }"
        @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone"
        @select="handleCheckedAllAndCheckedNone"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column property="orderId" label="支付订单编号" width="150">
        </el-table-column>
        <el-table-column property="auctionName" label="拍卖会名称" width="100">
        </el-table-column>
        <el-table-column property="objectName" label="标的名称">
        </el-table-column>
        <el-table-column property="client" label="委托方">
        </el-table-column>
        <el-table-column property="transactionPrice" label="成交金额">
        </el-table-column>
        <el-table-column property="royalty" label="软件使用费" width="100">
        </el-table-column>
        <el-table-column property="commission" label="佣金" width="200">
        </el-table-column>
        <el-table-column property="totalPrice" label="总金额">
        </el-table-column>
        <el-table-column property="bidder" label="竞买人">
        </el-table-column>
  
        <el-table-column label="操作" fixed="right" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              circle
              icon="el-icon-edit-outline"
              type="primary"
              title="编辑"
              size="small"
              @click="rowEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              circle
              icon="el-icon-delete"
              type="danger"
              title="删除"
              size="small"
              @click="rowDel(scope.$index, scope.row, $event)"
            ></el-button>
          </template>
        </el-table-column>
  
  
      </el-table>
      <!--分页-->
      <el-pagination
        :page-sizes="[10, 20, 30, 40, 100]"
        :page-size="10"
        :total="100"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <Edit v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog"
        @dialogClose="dialogClose"
        @submitData="submitData"></Edit>
    </div>
  </template>
      
    <script>
    import Edit from "./profitEdit";
    export default {
    name: "Profit",
    components: {
      Edit,
    },
    data() {
      return {
        formFileds: {},
  
        tableData: [
          {
            index: 0,
            orderId: '2333',
            auctionName: '机动车',
            objectName: '小汽车',
            client: '某大公司',
            transactionPrice: '20000',
            royalty: '10000',
            commission: '最多为成交金额的5%',
            totalPrice: '31000',
            bidder: '小明',

          },
        ],
        isShowEditDialog: false,
        
      };
    },
    methods: {
      handleRowClick(row, event, column) {
        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {
        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {
        this.isShowEditDialog = false;
      },
      submitData(){
        console.log('提交');
      },
      rowEdit(index, row) {
        // //当前选中行
        this.formFileds = row;
        this.isShowEditDialog = true;
      },
      // handleEdit(id) {
      //   this.$refs.editForm.validate((isValid) => {
      //     if (!isValid) return;
  
      //     // 保存编辑后的数据
      //     Object.assign(this.tableData[id], this.formFileds);
      //     this.isShowEditDialog = false;
  
      //     // 考虑到可能编辑了日期-需要重新排序
      //     // ***注意：手动排序传参和表格的default-sort属性格式不太一样
      //     this.$refs.list.sort("date", "descending");
  
      //     this.$message.success("编辑成功");
      //   });
      // },
      rowDel(index, row, event) {
        // 让当前删除按钮失焦
        event.target.blur();
  
        this.$confirm("确定要删除当前行吗？", "删除", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.tableData.splice(row.id, 1);
          this.$message.success("删除成功");
          return false;
        });
      },
      deleteAll() {
        this.$confirm("确定要删除这些行吗？", "删除", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$message.success("删除成功");
          return false;
        });
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {
        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      },
    },
  };
  </script>
      
    <style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }
  
  .el-date-editor {
    width: 100% !important;
  }
  </style>
      